<template>

    <div>
      <span
          :class="{
            'el-icon-s-fold': !isCollapse,
            'el-icon-s-unfold': isCollapse,
          }"
          class="icon"
          @click="change()"
      ></span>
    </div>
<!--  <img src="http://www.houde-meter.com/images/dqlogo.png"-->
<!--       style="float: left;margin-left: -10px"/>-->
    <span>
      <theme></theme>
    </span>
    <div class="grid-content bg-purple logout">
      <span class="el-icon-switch-button"></span>
      <span @click="onLogOut">安全退出</span>
    </div>
  </template>

  <script>
  import Theme from "@/components/common/Theme";

  export default {
    name: "header-bar",
    data() {
      return {
        isCollapse: false
      }
    },
    components: {
      Theme
    },
    methods: {
      change() {
        this.isCollapse = !this.isCollapse
        this.$emit("change", this.isCollapse)
      },
      onLogOut() {
        window.localStorage.removeItem('authorization');//删除指定key的数据

        this.$message({
          type: "success",
          message: "成功退出",
        });
        this.isLogin()
      },
      isLogin(){
        if (window.localStorage.getItem('authorization')===null){
          this.$router.push({
            name: 'Login'
          })
        }
      },
    },
    created() {
      this.isLogin();
    }
  }
  </script>

  <style scoped>
  .icon {
    cursor: pointer;
    font-size: 30px;
  }

  .logout {
    color: #3a8ee6;
    cursor: pointer;
  }
  </style>